<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跨行跨列</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    img {
        display: block;
        max-width: 80%;
        margin: 0 auto;
    }

    .content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1rem;
        grid-auto-rows: minmax(300px, auto);
    }

    .content>div {
        background: #eee;
        padding: 1rem;
    }

    .content>div:nth-child(odd) {
        background: #ddd;
    }

    .box1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1rem;
        text-align: center;
        grid-auto-rows: 100px;
    }

    .box1>div {
        border: 1px solid #000;
    }

    .box2 {
        display: grid;
        grid-template-columns: 5fr 3fr 2fr;
        grid-gap: 1rem;
        grid-auto-rows: minmax(100px, auto);

        /* justify-items: start;
                align-items: stretch; */
    }

    .box2>div {
        border: 1px solid #000;
    }

    .box2 .item1 {
        align-self: start;
    }

    .box2 .item3 {
        justify-self: end;
    }

    /* 跨行跨列 */
    .box3 {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-gap: 1rem;
        grid-auto-rows: minmax(100px, auto);
    }

    .box3>div {
        border: 1px solid #000;
    }

    .box3 .item1 {
        /* 跨列 第一根线到第三根线 */
        grid-column: 1/3;
        /* 跨行 第一根线到第三根线 */
        grid-row: 1/3
    }

    .box3 .item2 {
        /* 跨列  第三根线 */
        grid-column: 3;
        /* 跨行 第一根线到第三根线 */
        grid-row: 1/3
    }

    /* 实现3 4互换位置 */
    .box3 .item3 {
        /* 跨列  第二根线到第四根线 */
        grid-column: 2/4;
        /* 跨行 第三根线  */
        grid-row: 3
    }

    /* 实现1 4重叠 */
    .box3 .item4 {
        /* 跨列  第一根线 */
        grid-column: 1;
        /* 跨行  第二根线到第四根线 */
        grid-row: 2/4
    }
</style>

<body>
    <div class="content">
        <div>Lorem ipsum dolor sit amet.</div>
        <div>Lorem ipsum dolor sit amet.</div>
        <div class="box1">
            <!-- .item${item $}*4 -->
            <div class="item1">item 1</div>
            <div class="item2">item 2</div>
            <div class="item3">item 3</div>
            <div class="item4">item 4</div>
            <div class="item5">item 5</div>
            <div class="item6">item 6</div>
            <div class="item7">item 7</div>
            <div class="item8">item 8</div>
            <div class="item9">item 9</div>
        </div>
        <div class="box2">
            <div class="item1">item 1</div>
            <div class="item2">item 2</div>
            <div class="item3">item 3</div>
            <div class="item4">item 4</div>
        </div>
        <div class="box3">
            <div class="item1">item 1</div>
            <div class="item2">item 2</div>
            <div class="item3">item 3</div>
            <div class="item4">item 4</div>
        </div>
    </div>
    <img src="./image/lines.png" alt="" srcset="">
</body>

</html>